<template>
    <div class="ahLayout">
        <div class="Box" v-loading="loading" element-loading-text="loading..." element-loading-background="white">
            <div class="infoBox">
                <p>
                    <span>酒店名称</span>
                    <span>
                        <el-input v-model="info.hotel_name" placeholder="Please input" maxlength="25"/>
                    </span>
                </p>
                <p></p>
                <p class="address">
                    <span>地址</span>
                    <el-cascader
                            size="large"
                            :options="options"
                            v-model="info.city_id"
                            @change="handleChange">
                    </el-cascader>
                </p>
                
                <p>
                    <span>酒店类型</span>
                    <el-select v-model="info.type" class="m-2" placeholder="Select" size="large">
                        <el-option v-for="item in kinds" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </p>
                <p>
                    <span>经度</span>
                    <span>
                        <el-input v-model="info.longitude" placeholder="手动输入经纬度" />
                    </span>
                </p>
                <p class="latitude">
                    <span>纬度</span>
                    <span>
                        <el-input v-model="info.latitude" placeholder="点击旁边图标获取经纬度"/>
                    </span>
                </p>
                <p class="positionJW">
                    <el-icon @click="getPosition" title="获取当前位置经纬度" :size="25"><LocationInformation /></el-icon>
                </p>
                <p class="detailInfo">
                    <span>详细地址</span>
                    <span>
                        <el-input v-model="info.address" clearable />
                    </span>
                </p>
                <p class="uploadBox">
                    <span>酒店图片</span>
                    <span>
                        <upload-box url="/api/hotel/uploadHotelImage" 
                                    :getImgUrl="'/hotel/getImageUrl?id=' + id"
                                    imgPrefix="/api/hotel/getImage/"
                                    v-if="upLoading"
                                    ref="uploadBoxRef"
                                    limit="5" 
                                    :autoUpload="true"
                                    :id="id"
                                    :data="{ id }"
                                    @delImg="delImg"
                        ></upload-box>
                    </span>
                </p>
                <p class="descBox">
                    <span>酒店简介</span>
                    <span>
                        <el-input
                            v-model="info.introduction"
                            placeholder="请介绍你的酒店，吸引更多的顾客"
                            show-word-limit
                            :rows="5" 
                            :maxlength="255"
                            type="textarea"
                        />
                    </span>

                </p>
            </div>
            <div class="btnBox">
                <button @click="goSave" :disabled="!isAdd">保存</button>
            </div>
        </div>
    </div> 
</template>

<script lang="ts" setup>
import { reactive, ref, onBeforeMount, computed } from 'vue'
import { regionData } from 'element-china-area-data'  
import { get, post } from '@/http/axios'
import { ElMessage } from 'element-plus'
import { getCookies } from '@/utils/cookies'
import { useUserInfoStore } from '@/store/userInfoState'
import { uploadBox } from '@/components'
import { useRouter } from 'vue-router'
 
type kindType ={
    id:number
    name:string
}
const info = reactive({
    hotel_name:null,
    address:null,
    introduction: '',
    type:1,
    city_id:[],      //行政编码
    latitude:null,    //经度
    longitude:null    //纬度
})
let kinds = ref<Array<kindType>>()
const uploadBoxRef = ref()
const router = useRouter()
const store = useUserInfoStore()
const options = ref(regionData)
let loading = ref<boolean>(true)
let upLoading = ref<boolean>(true)
let id = ref<number>()
onBeforeMount(() => {
    id.value = store.user?.id?store.user.id:getCookies('id')
    getInfo()
    getHotelKinds()
})
function getInfo() {
    get('/hotel/getHotel?id=' + id.value).then(res => {
        Object.keys(info).forEach(el => {
            let val = res.result[el]
            if (val) info[el] = val
        })
        loading.value = false
        console.log('结束',info);
        
    }).catch(err =>{
        ElMessage.error('加载酒店信息失败')
    })
}
function delImg(name:string){
    if (uploadBoxRef.value.fileList.length <= 3) {
        ElMessage.error('图片不能少于3张，请添加后再删除')
        return
    }
    get('/hotel/deleteImage?id=' + id.value + '&imageId=' + name)
    .then(res => {
        if (res.result) ElMessage.success('删除成功')
        upLoading.value = false
        let timer = setTimeout(() => {
            clearTimeout(timer)
            upLoading.value = true
        })
    })
}
function handleChange(val:Array<any>){
    info.city_id = val[val.length - 1]
}
function goSave(){
    if (uploadBoxRef.value.fileList.length < 3) {
        ElMessage.error('最少提交3张图片')
        return
    }
    //uploadBoxRef.value.submitUpload()
    upLoading.value = false
    post('/hotel/updateInfo', { 
        id:id.value,
        hotel_name:info.hotel_name,
        type:info.type,
        introduction:info.introduction,
        city_id:info.city_id,
        address:info.address,
        latitude:info.latitude,
        longitude:info.longitude
     }).then(res => {
        if (res.result) {
            let timer = setTimeout(() => {
                clearTimeout(timer)
                upLoading.value = true
            },500)
            ElMessage({
                type: 'success',
                message: '修改成功',
            })
            router.push({path:'/main/hotel/hotelInfo'})
        }
     })
}
function getPosition(){
    if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(success, () => {
            ElMessage.error('获取位置信息失败')
       })
    } else {
        ElMessage.error('当前浏览器不支持,获取位置信息失败，请手动输入')
    }
}
function success(position) {
    info.latitude = position.coords.latitude; // 纬度
    info.longitude = position.coords.longitude; // 经度
}
function getHotelKinds(){
    get('/hotelType/queryAll').then(res => {
        kinds.value = res.result
    })
}
const isAdd = computed(() => {
    let flag = true
    Object.keys(info).forEach(el => {
        if (!info[el]){
            flag = false
        }
    })
    return flag
})
</script>

<style lang="scss" scoped>
@media  screen and (min-width: 0) and (max-width: 1400px){
    .Box{
        width: 85%;
    }
}
@media  screen and (min-width: 1400px) and (max-width: 1600px){
    .Box{
        width: 80%;
    }
}
@media  screen and (min-width: 1600px) and (max-width: 100vw){
    .Box{
        width: 60%;
    }
}
.ahLayout{
    width: 100%;
    @include flexColumnCenter;
    gap: 2px;
    @include allBack;
}
.Box{
    padding: 0 0 20px 0;
    box-sizing: border-box;
    background: white;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    box-shadow: var(--el-box-shadow);
}
.infoBox{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 20px;
    box-sizing: border-box;
    & p{
        width: calc(50% - 20px);
        text-align: left;
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 10px;
        box-sizing: border-box;
        position: relative;
    }
    & p span:nth-child(1){
        width: 130px;
        @include flexRowCenter;
        background: rgb(52, 152, 219,0.2);
        padding: 5px 0;
        box-sizing: border-box;
        border-radius: 8px;
    }
}
.latitude{
    width: calc(50% - 100px) !important;

}
.positionJW{
    width: 40px !important;
    cursor: pointer;
    &:hover{
        color: #3498db;
    }
}
.afterI{
    cursor: pointer;
    border-radius: 5px;
    transition: all .5s;
    &:hover{
        background: #f5f6f7;
    }
}
.detailInfo{
    width: 100% !important;
    & span:nth-child(2){
        width: calc(100% - 140px);
    }
}
.uploadBox{
    width: 100% !important;
    position: relative;
    & span:nth-child(2){
        border: 1px solid var(--el-border-color);
        display: flex;
        justify-content: start;
        align-items: start;
        flex-wrap: wrap;
        gap: 20px;
        width: calc(100% - 140px);
        padding: 10px;
        box-sizing: border-box;
        border-radius: 4px;
    }
}
.descBox{
    width: 100% !important;
    & span:nth-child(2){
        width: calc(100% - 140px);
    }
}
.btnBox{
    width: 100%;
    @include flexRowCenter;
    gap: 20px;
    & button{
        width: 200px;
        border: none;
        background: #3498db;
        color: white;
        outline: none;
    }
    & button:hover{
        background: #2980b9;
    }
    & button:disabled{
        background: #dad9d9;
    }
}
:deep(.el-input) {
    height: 100%;
}
</style>